<template>
	<view class="content">
		<view class="topBox">
			<view class="barTitle" :style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}">
				我的
			</view>
			
			<view class="teacherBox" v-if="isLogout == 1">
				<view class="teaImg" style="background-color:#fff;border-radius:50%;">
					<image src="../../static/pic.png" mode=""></image>
				</view>
				
				<view class="teaInfo teaInfo2" @click="goLogin">
					<view class="teaName">
						登录/注册
					</view>
					<view class="teaphone">
						登录注册后才能看到更多内容
						<text @click.stop="changeUser" v-if="isMaster == 1" style="font-size:24rpx;padding-left:30rpx;">切换用户端</text>
					</view>
				</view>
			</view>
			
			<view class="teacherBox" @click="goInformation" v-else>
				<view class="teaImg">
					<image :src="userInfo.headerImage" mode=""></image>
				</view>
				<view class="teaInfo">
					<view class="teaName">
						{{userInfo.nickName}}
					</view>
					<view class="teaphone">
						{{userInfo.phone}}
						<text @click.stop="changeUser" v-if="isMaster == 1" style="font-size:24rpx;padding-left:30rpx;">切换用户端</text>
						
					</view>
				</view>
			</view>
			
			
			<view class="guanBox">
				<view class="guanli" @click="goPage('/pages/mine/aboutUs')">
					<view class="guanTxt">关于我们</view>
					<view class="rightInfo">
						<image src="../../static/more2.png" mode=""></image>
					</view>
				</view>
				
				<view class="guanli guanli2 guanWrap">
					<view class="guanTxt">
						<button open-type="contact">联系客服</button>
					</view>
					<view class="rightInfo">
						<image src="../../static/more2.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="otherInfo" @click="goPage('/pages/engineer/historyList')">
				<view class="otherTxt">
					历史服务记录
				</view>
				<view class="rightInfo">
					<image src="../../static/more2.png" mode=""></image>
				</view>
			</view>
			
		</view>
		
		<!-- 底部导航 -->
		<otherBottom :suo="2"></otherBottom>
		
	</view>
</template>

<script>
	import otherBottom from '@/components/otherBottom.vue';
	import { getUserInfoDetail, updateUserInfo, loginForm } from '@/api/login.js';
	export default {
		components:{
			otherBottom
		},
		data() {
			return {
				userInfo:{},
				navBarTop: null,
				navBarHeight: null,
				isMaster: '',
				isLogout: ''
			}
		},
		onLoad() {
			this.isLogout = uni.getStorageSync('isLogout');
			let statuBar = uni.getSystemInfoSync().statusBarHeight;
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarTop = menuButtonInfo.top;
			this.navBarHeight = menuButtonInfo.height;
			this.getUserInfo(); 
		},
		methods: {
			goLogin(){
				uni.login({
					provider: 'weixin', //使用微信登录
					success:ress=> {
						console.log(ress);
						loginForm({code:ress.code}).then(res=>{
							uni.setStorageSync('userToken',res.data.token);
							uni.setStorageSync('needReg',res.data.needReg);
							uni.setStorageSync('openId',res.data.openId);
							uni.setStorageSync('userInfo',res.data.wxUser);
							uni.setStorageSync('isLogout',0);
							this.isLogout = uni.getStorageSync('isLogout');
						});
					}
				});
			},
			changeUser(){
				let userInfo = uni.getStorageSync('userInfo');
				userInfo.isMaster = null;
				uni.setStorageSync('isChange',1);
				uni.setStorageSync('userInfo',userInfo);
				console.log(uni.getStorageSync('userInfo'),'======3333')
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			// 跳转页面
			goPage(page){
				if(uni.getStorageSync('isLogout') == 1) {
					  return uni.$u.toast('请先登录！');
				}
				uni.navigateTo({
					url: page
				})
			},
			// 跳转到个人页面
			goInformation(){
				uni.navigateTo({
					url: '/pages/mine/information'
				});
			},
			getUserInfo(){
				if(uni.getStorageSync('isChange') == 1) {
					this.userInfo = uni.getStorageSync('userInfo');
					this.isMaster = uni.getStorageSync('userInfo').isMaster == null?'':uni.getStorageSync('userInfo').isMaster;
					return;
				}
				getUserInfoDetail({id: uni.getStorageSync('userInfo').id}).then(res=>{
					this.isMaster = res.data.isMaster == null?'':res.data.isMaster;
					if(res.code == 200) {
						this.userInfo = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color:#F4F4F4;min-height: 100vh;
	.topBox{
		background: linear-gradient( 360deg, #F4F4F4 0%, #3671E9 44%, #0F47BA 100%);height:500rpx;
		.barTitle{
			text-align: center;margin-bottom:34rpx;font-size:34rpx;color:#fff;font-weight:500;
		}
	}
	.guanBox{
		background: #FFFFFF;border-radius: 12rpx;margin:0 32rpx 34rpx;padding:34rpx 0;
		.guanli{
			padding:0 24rpx;@include flx;justify-content: space-between;align-items: center;
			.guanTxt{
				@include baseFont(30rpx,#333,48rpx);padding-left:68rpx;background: url('../../static/about1.png') no-repeat left center;
				background-size:48rpx;
			}
			.rightInfo{
				image{
					display: block;width:32rpx;height:32rpx;
				}
			}
		}
		.guanli2{
			margin-top:36rpx;
			.guanTxt{
				background: url('../../static/about2.png') no-repeat left center;background-size:48rpx;
			}	
		}
	}
	.otherInfo{
		background: #FFFFFF;border-radius: 12rpx 12rpx 0 0;margin:0 32rpx;padding:0 24rpx;@include flx;justify-content: space-between;
		align-items: center;
		.otherTxt{
			@include baseFont(30rpx,#333,112rpx);padding-left:68rpx;background: url('../../static/about3.png') no-repeat left center;
				background-size:48rpx;
		}
		.rightInfo{
			image{
				display: block;width:32rpx;height:32rpx;
			}
		}
	}
	.otherInfo2{ 
		border-radius:0 0 12rpx 12rpx;
	}
	.teacherBox{
		@include flx;padding:0 32rpx 40rpx;align-items: center;
		.teaImg{
			border-radius:2rpx solid #fff;
			image{
				border-radius:50%;display: block;width:144rpx;height:144rpx;
			}
		}
		.teaInfo{
			margin-left:32rpx;
			.teaName{
				@include baseFont(36rpx,#fff,42rpx);margin-bottom:12rpx;
			}
			.teaphone{
				@include baseFont(30rpx,#fff,42rpx);padding-left:36rpx;background: url('../../static/call.png') no-repeat left center;
				background-size:32rpx;
			}
		}
		.teaInfo2{
			
		}
	}
}
</style>
